<template>
  <div class="box">
    <!-- 背景特效 -->
    <div class="flex-0 stars">
      <div class="login-stars"></div>
      <div class="login-stars2"></div>
      <div class="login-stars3"></div>
    </div>
    <!-- 内容主体 -->
    <div class="login_container">
      <div class="login_cont animate">
        <div class="logoimg jcen row">
          <!-- <img class="header" :src="appName.loginImg" alt /> -->
          <div class="title ml20">{{ appName.loginName }}</div>
        </div>
      </div>

      <!-- 登录区域 -->
      <div class="login_form">
        <div class="txt">登录</div>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          label-width="0px"
          class="login_form_style"
        >
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              clearable
              placeholder="请输入登录账号"
              prefix-icon="el-icon-user"
              @keyup.enter.native="login()"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              show-password
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              clearable
              placeholder="请输入登录密码"
              type="password"
              @keyup.enter.native="login()"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row class="forget-row">

            </el-row>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button class="mybtn" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 版权 -->
      <div class="copyright">


      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Cookies from 'js-cookie';
import ThemePicker from '@/components/ThemePicker';
import LangSelector from '@/components/LangSelector';
import Rsa from '@/utils/rsa.js';
export default {
  components: {
    ThemePicker,
    LangSelector
  },
  data() {
    return {
      loginForm: {
        account: '',
        password: ''
      },
      //表单的验证规则对象
      loginFormRules: {
        account: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          }
        ],

        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur'
          }
        ]
      },
      rememberPass: false
    };
  },
  created() {
    var param = sessionStorage.getItem('parUrl');
    if (param) {
      param = param.split('?');
      if (param[1] && param[1].indexOf('password') != -1) {
        // console.log("拿到的",param[1]);
        var array = param[1].split('&');
        var oneacc = array[0].split('=');
        var onepas = array[1].split('=');
        if (oneacc[1] && onepas[1]) {
          this.loginForm.account = oneacc[1];
          this.loginForm.password = onepas[1];
          this.login();
        } else {
          this.$message({
            message: '登录超时，请重新登录',
            type: 'error'
          });
        }
      }
    }
  },
  methods: {
    async login() {
      // 添加方法内表单验证
      let password = this.$md5(this.loginForm.password);
      let rsa = new Rsa();
      let aesrsa = rsa.RSAencrypt(rsa.key + rsa.iv);
      let rs = await this.$api.user.get_server_timestamp();
      let timestamp = rs.code === 0 && rs.data ? rs.data : new Date().getTime();
      let userInfo = {
        username: rsa.encrypt(this.loginForm.account),
        password: rsa.encrypt(password),
        aesrsa: aesrsa,
        timestamp: timestamp,
        sign: this.$md5(`${this.loginForm.account}#${password}#${rsa.key + rsa.iv}#${timestamp}`)
      };

      this.$api.login
        .login(userInfo)
        .then((res) => {
          if (res.code == 0) {
            this.loading = false;
            sessionStorage.setItem('lastTime', new Date().getTime());
            Cookies.set('token', res.data.token); // 放置token到Cookie
            sessionStorage.setItem('token', res.data.token);
            sessionStorage.setItem('userInfo', JSON.stringify(res.data.user));
            window.removeEventListener('keydown', this.handleKeyDown, true); //请求成功移除键盘按下事件
            this.$store.commit('menuRouteLoaded', false); // 要求重新加载导航菜单
            sessionStorage.setItem('group', JSON.stringify(res.data.group)); // 保存用户到本地会话
            sessionStorage.setItem('userID', JSON.stringify(res.data.user)); // 保存用户到本地会话
            sessionStorage.setItem('account', this.loginForm.account); // 保存账号
            sessionStorage.setItem('password', password); // 保存密码
            sessionStorage.setItem('keyiv', JSON.stringify({ key: rsa.key, iv: rsa.iv })); // AES key iv
            sessionStorage.setItem('timestamp', new Date().getTime()); // 本地获取token时间戳
            // loginForm
            this.$store.commit('setAccount', this.loginForm);
            // this.$router.push("/"); // 登录成功，跳转到主页
            this.$router.push('/'); // 登录成功，跳转到主页
            this.initDict();
          } else {
            this.$message({
              message: '用户名或密码错误',
              type: 'error'
            });
          }
        })
        .catch((res) => {
          this.$message({
            message: res.message,
            type: 'error'
          });
        });
    },
    help() {
      window.open('static/_book/index.html');
    },
    handleKeyDown(e) {
      let key = null;
      if (window.event === undefined) {
        key = e.keyCode;
      } else {
        key = window.event.keyCode;
      }
      if (key === 13) {
        //this.login();
      }
    },

    async initDict() {
      this.$api.dict.initDict({ select: true }).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          let dictData = res.data;
          sessionStorage.setItem('dictData', JSON.stringify(dictData));
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
        }
      });
      let rs = await this.$api.dict.findPage({ limit: 1000 });
      let maps = rs.data.map((it) => {
        let o = {};
        o.name = it.name;
        o.DID = it.DID;
        return o;
      });
      sessionStorage.setItem('dictDataAll', JSON.stringify(maps));
    },
    refreshCaptcha() {
      this.loginForm.src = this.global.imgUrl + '/captcha.jpg?t=' + new Date().getTime();
    },
    reset() {
      this.$refs.loginForm.resetFields();
    }
  },
  mounted() {
    this.refreshCaptcha();
  },
  computed: {
    ...mapState({
      themeColor: (state) => state.app.themeColor,
      appName: (state) => state.title.name
    })
  }
};
</script>

<style lang="scss">
// 添加伪样式穿透
.login_form_style {
  margin-top: 46px;

  .el-form-item__error {
    left: 18px !important;
  }
}
</style>

<style lang="scss" scoped>
.box {
  background: url('~@/assets/imgs/4/login1.png') no-repeat;
  background-color: #05112a;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  min-height: 500px;
}

.box .stars {
  height: 100%;
  width: 100%;
  animation: fade 3s ease-in 0s 1 normal;
  position: absolute;
}

.flex-0 {
  -ms-flex: 0;
  flex: 0;
}


.login-stars {
  animation: animStar 50s linear infinite;
}

.login-stars2,

.login-stars2 {
  animation: animStar 100s linear infinite;
}

.login-stars3,
.login-stars3:after {
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  box-shadow: 1679px 1408px #fff, 1970px 1504px #fff, 1789px 965px #fff, 698px 234px #fff, 1733px 1854px #fff,
    1060px 271px #fff, 719px 1744px #fff, 1707px 1847px #fff, 1710px 432px #fff, 1325px 1585px #fff,
    92px 577px #fff, 163px 1938px #fff, 1885px 123px #fff, 1566px 1753px #fff, 1288px 21px #fff, 1396px 1908px #fff,
    675px 1466px #fff, 734px 1557px #fff, 941px 1885px #fff, 1692px 6px #fff, 115px 1183px #fff, 639px 1044px #fff,
    1171px 1982px #fff, 1801px 1078px #fff, 648px 820px #fff, 1885px 1984px #fff, 268px 1729px #fff,
    1388px 181px #fff, 1741px 1280px #fff, 1719px 1080px #fff, 12px 932px #fff, 489px 157px #fff, 1910px 790px #fff,
    115px 44px #fff, 1748px 1458px #fff, 282px 109px #fff, 1100px 1528px #fff, 543px 598px #fff, 1320px 1188px #fff,
    1124px 839px #fff, 1406px 1289px #fff, 472px 1376px #fff, 852px 286px #fff, 510px 860px #fff, 700px 306px #fff,
    1822px 1302px #fff, 15px 19px #fff, 1360px 420px #fff, 1483px 42px #fff, 1287px 1867px #fff, 1105px 1322px #fff,
    745px 161px #fff, 431px 1722px #fff, 855px 1254px #fff, 860px 1784px #fff, 1578px 1955px #fff,
    1085px 461px #fff, 472px 690px #fff, 23px 1152px #fff, 1625px 601px #fff, 1177px 1692px #fff, 397px 1984px #fff,
    10px 1164px #fff, 1132px 1557px #fff, 438px 817px #fff, 1590px 1236px #fff, 1037px 1616px #fff,
    533px 941px #fff, 1163px 1992px #fff, 1451px 1081px #fff, 1335px 1578px #fff, 503px 1556px #fff,
    197px 1725px #fff, 511px 1397px #fff, 1514px 1164px #fff, 1249px 148px #fff, 947px 1849px #fff,
    1258px 1426px #fff, 255px 1937px #fff, 23px 529px #fff, 578px 230px #fff, 925px 767px #fff, 903px 365px #fff,
    1861px 451px #fff, 1813px 912px #fff, 1597px 637px #fff, 195px 626px #fff, 130px 404px #fff, 725px 408px #fff,
    1916px 843px #fff, 1336px 239px #fff, 1568px 1390px #fff, 139px 126px #fff, 1287px 1271px #fff,
    731px 465px #fff, 1959px 1465px #fff, 909px 169px #fff, 838px 1332px #fff, 464px 1037px #fff, 1893px 233px #fff;
}

.login-stars3 {
  animation: animStar 150s linear infinite;
}

.login-stars:after {
  content: ' ';
  position: absolute;
  top: 2000px;
}

@keyframes animStar {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-2000px);
  }
}

.login_container {
  display: flex;
  color: #fff;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;

  .login_cont {
    flex: 2;
    font-size: 28px;
    line-height: 40px;
    justify-content: center;

    p {
      margin: 40px 0;
    }

    .logoimg {
      position: fixed;
      top: 67px;
      width: 100%;
      height: 59px;
      line-height: 59px;

      .title {
        font-size: 51px;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: 2px;
      }

      .header {
        height: 58.3px;
        width: 58.3px;
      }
    }

    .logo {
      float: left;
      margin-right: 20px;
      // width: 50px;
      // width: 150px;
      // width: 70px;
      height: 80px;

      // width: 100px;
      img {
        height: 100%;
      }
    }
  }

  .mybtn {
    height: 56px;
    background: #1d78f4;
    border-radius: 10px 10px 10px 10px;
    width: 380px;
  }

  .login_form {
    width: 442px;
    height: 486px;
    background: #ffffff;
    border-radius: 15px 15px 15px 15px;
    margin-top: 47px;
    margin-right: 235px;

    .txt {
      font-size: 30px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #2f3033;
      margin-top: 60px;
    }
  }

  .login_title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 28px;
    color: #fff;
    text-align: center;
    background: #00ffff;
    // font-family: cursive;
    font-family: 'Microsoft YaHei';

    background-image: -webkit-linear-gradient(60deg, #00f0ff, #1a81eb);
    -webkit-text-fill-color: transparent;
    /* 将字体设置成透明色 */
    -webkit-background-clip: text;
    border-bottom: 1px solid #9abbf5;
    margin-bottom: 60px;
  }

  .copyright {
    position: absolute;
    width: 100%;
    bottom: 34px;
    line-height: 30px;
    z-index: 10;

    .copylinks span {
      margin: 0 10px;
      cursor: pointer;
    }

    .gongImg {
      width: 40px;
      transition: all 0.6s;
    }

    .gongImg:hover {
      width: 160px;
    }

    .copytips {
      height: 30px;
      font-size: 20px;
      font-family: Segoe UI-Regular, Segoe UI;
      font-weight: 400;
      color: #6d7483;
    }
  }
}

.el-input {
  display: block;
  width: 380px;
  height: 56px;
  margin: 0 auto;
  border-radius: 10px;
  // outline: none !important;
}

/deep/ .el-input__inner {
  height: 56px !important;
}

.el-button {
  display: block;
  width: 90%;
  line-height: 22px;
  margin: 0 auto;
  cursor: pointer;
}

.animate span {
  display: inline-block;
}

.animate span:nth-of-type(2) {
  animation-delay: 0.05s;
}

.animate span:nth-of-type(3) {
  animation-delay: 0.1s;
}

.animate span:nth-of-type(4) {
  animation-delay: 0.15s;
}

.animate span:nth-of-type(5) {
  animation-delay: 0.2s;
}

.animate span:nth-of-type(6) {
  animation-delay: 0.25s;
}

.animate span:nth-of-type(7) {
  animation-delay: 0.3s;
}

.animate span:nth-of-type(8) {
  animation-delay: 0.35s;
}

.animate span:nth-of-type(9) {
  animation-delay: 0.4s;
}

.animate span:nth-of-type(10) {
  animation-delay: 0.45s;
}

.animate span:nth-of-type(11) {
  animation-delay: 0.5s;
}

.animate span:nth-of-type(12) {
  animation-delay: 0.55s;
}

.animate span:nth-of-type(13) {
  animation-delay: 0.6s;
}

.animate span:nth-of-type(14) {
  animation-delay: 0.65s;
}

.login_cont span {
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
  animation: revolveScale 0.5s forwards;
}

.login_container .login_cont_first .blue {
  color: #00f0ff !important;
  font-size: 44px;
}

@keyframes revolveScale {
  60% {
    transform: translate(20px, 0) scale(1);
    color: #fff;
  }

  80% {
    transform: translate(20px, 0) scale(1);
    color: #fff;
  }

  99% {
    transform: translate(0) scale(1.2);
    color: #00f0ff;
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
    // color: #fff;
  }
}

.forgetPass {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #0175fe;
}

.forget-row {
  width: 380px;
  margin-left: 31px;
}
</style>
